import React, { useState, useEffect } from 'react';
import styles from './adduse.less';
import '../../../../src/global.css'
import { useDispatch, useSelector, userModelIstate } from 'umi'
let Adduser: React.FC = function () {

  const {  identitylist, userallinfo, apilist, viewlist } = useSelector((module: { usermanage: userModelIstate }) => module.usermanage)
  const [username, setUsername] = useState("")  //添加-用户名
  const [userpwd, setUsepwd] = useState("")     //添加-密码
  const [identityid, setidentityid] = useState("")    //用户权限id
  const [apiname, setapiname] = useState("")    //api名
  const [apiurl, setapiurl] = useState("")    //api地址
  const [apimethod, setapimethod] = useState("")    //api方法
  const [flag, setFlag] = useState(false)   //添加和更新用户的开关
  const [userid, setuserid] = useState("")   //身份id
  const [userid1, setuserid1] = useState("")   //身份id1
  const [viewid, setviewid] = useState("")   //视图id
  const [api, setapi] = useState("")   //api接口
  const [viewapi, setviewapi] = useState("")   //现有视图内容
  const [identityname, setidentityname] = useState('')
  const dispatch = useDispatch()
  console.log(viewlist, "jsdjfsd");
  //添加用户和更新用户设置值
  let setval = (e: any) => {
    console.log(e.target)
    if (e.target.name === "usernames") {
      setUsername(e.target.value)
    } else if (e.target.name === "userpwds") {
      setUsepwd(e.target.value)
    } else if (e.target.name === "identity") {
      setidentityid(e.target.value)
    } else if (e.target.name === "namemessage") {
      setidentityname(e.target.value)
    }
    if (e.target.name === "nameapi") {
      setapiname(e.target.value)
    } else if (e.target.name === "apiurl") {
      setapiurl(e.target.value)
    } else if (e.target.name === "apimethod") {
      setapimethod(e.target.value)
    } else if (e.target.name === "userid") {
      setuserid(e.target.value)
    } else if (e.target.name === "api") {
      setapi(e.target.value)
    } else if (e.target.name === "userid1") {
      setuserid1(e.target.value)
    } else if (e.target.name === "viewid") {
      setviewid(e.target.value)
    } else if (e.target.name === "viewapi") {
      setviewapi(e.target.value)
    }
  }

  // 添加用户
  const adduser = () => {
    setFlag(false)
  }

  //更新用户
  const updatauser = () => {
    setFlag(true)
  }


  //提交添加的用户   调用添加用户的接口进行用户添加
  //   请输入4到16位（字母，数字，下划线，减号）格式的用户名
  //  "您的密码应该最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符"
  // 请输入4到16位（字母，数字，下划线，减号）格式的用户名
  let submit = (type: string) => {
    if (type === "one") {
      if (flag) {  //更新
        let U: any = userallinfo.find(item => {
          return item.user_name === username
        })
        let result: any = dispatch({
          type: "usermanage/putuser",
          payload: {
            user_id: U.id,
            user_name: username,
            user_pwd: userpwd,
            identity_id: identityid
          }
        })
        result.then((res: any) => {
          if (res.code === 1) {
            alert(res.msg)
          } else {
            alert(res.msg)
          }

        })
      } else {   //添加
        let result: any = dispatch({
          type: "usermanage/adduser",
          payload: {
            user_name: username,
            user_pwd: userpwd,
            identity_id: identityid
          }
        })
        result.then((res: any) => {
          if (res.code === 1) {
            alert(res.msg)
          } else {
            alert(res.msg)
          }
        })

      }
    } else if (type === "two") {   //重新更新一下添加身份id
      let result: any = dispatch({
        type: "usermanage/addidentitylist",
        payload: { identity_text: identityname }
      })
      result.then((res: any) => {
        if (res.code === 1) {
          alert(res.msg)
        } else {
          alert(res.msg)
        }

      })
    } else if (type === "three") {

      let result: any = dispatch({
        type: "usermanage/addapi",
        payload: {
          api_authority_text: apiname,
          api_authority_url: apiurl,
          api_authority_method: apimethod
        }
      })
      result.then((res: any) => {
        if (res.code === 1) {
          alert(res.msg)
        } else {
          alert(res.msg)
        }

      })
    } else if (type === "four") {

      let result: any = dispatch({
        type: "usermanage/setauthorityView",
        payload: {
          view_authority_text: viewapi,
          view_id: "8olznh-943zt"
        }
      })
      result.then((res: any) => {
        if (res.code === 1) {
          alert(res.msg)
        } else {
          alert(res.msg)
        }

      })
    } else if (type === "five") {
      let result: any = dispatch({
        type: "usermanage/setIdentityApi",
        payload: {
          identity_id: userid,
          api_authority_id: api
        }
      })
      result.then((res: any) => {
        if (res.code === 1) {
          alert(res.msg)
        } else {
          alert(res.msg)
        }

      })
    } else if (type === "six") {
      let result: any = dispatch({
        type: "usermanage/setIdentityView",
        payload: {
          identity_id: userid1,
          view_authority_id: viewid
        }
      })
      result.then((res: any) => {
        if (res.code === 1) {
          alert(res.msg)
        } else {
          alert(res.msg)
        }

      })
    }

  }

  //重置数据
  const reset = (type: string) => {
    if (type === 'one') {
      setUsername("")
      setUsepwd("")
      setidentityid("")
    } else if (type === "two") {
      setidentityname("")
    } else if (type === "three") {
      setapiname("")
      setapiurl("")
      setapimethod("")
    } else if (type === "four") {

    } else if (type === "five") {
      setapi("")
      setuserid("")
    } else if (type === "six") {
      setuserid1('')
      setviewid('')
    }
  }

  return (
    <div className={styles.adduser}>
      <div className={styles.header}>
        <h2>添加用户</h2>
      </div>
      <div className={styles.con}>
        <ul>
          <li>
            <div className={styles.one}><button onClick={adduser} className={flag ? "" : styles.active}>添加用户</button> <button className={flag ? styles.active : ""} onClick={updatauser}>更新用户</button> </div>
            <div><input type="text" placeholder="请输入用户名" onChange={setval} value={username} name="usernames" /></div>
            <div><input type="text" placeholder="请输入密码" onChange={setval} value={userpwd} name="userpwds" /></div>
            <div><select name="identity" onChange={setval} value={identityid}>
              <option>请选者省份id</option>
              {identitylist.map(item => <option key={item.identity_id} value={item.identity_id}>{item.identity_text}</option>)}
            </select></div>
            <div><button onClick={() => submit('one')} className={styles.que}>确定</button><button onClick={() => reset('one')} className={styles.rest}>重置</button></div>
          </li>
          <li>
            <div><button>添加身份</button></div>
            <div><input type="text" placeholder="请输入身份名称" name="namemessage" onChange={setval} value={identityname} /></div>
            <div><button onClick={() => submit("two")} className={styles.que} >确定</button><button onClick={() => reset("two")} className={styles.rest}>重置</button></div>
          </li>
          <li>
            <div><button>添加api权限接口</button></div>
            <div><input type="text" placeholder="请输入api权限接口名称" name="nameapi" onChange={setval} value={apiname} /></div>
            <div><input type="text" placeholder="请输入api权限url" name="apiurl" onChange={setval} value={apiurl} /></div>
            <div><input type="text" placeholder="请输入api权限先方法" name="apimethod" onChange={setval} value={apimethod} /></div>
            <div><button onClick={() => submit("three")} className={styles.que}>确定</button><button onClick={() => reset("three")} className={styles.rest}>重置</button></div>
          </li>
          <li>
            <div><button>添加视图接口权限</button></div>
            <div><select name="viewapi" onChange={setval} >
              <option>请选择已有视图</option>
              {viewlist.map(item => <option key={item.view_id} value={item.view_authority_id}>{item.view_authority_text}</option>)}
            </select></div>
            <div><button onClick={() => submit("four")} className={styles.que}>确定</button><button onClick={() => reset("four")} className={styles.rest}>重置</button></div>

          </li>
          <li>
            <div><button>给身份设置api接口权限</button></div>
            <div><select name="userid" onChange={setval} >
              <option>请选择身份id</option>
              {identitylist.map(item => <option key={item.identity_id} value={item.identity_id}>{item.identity_text}</option>)}
            </select></div>
            <div><select name="api" onChange={setval} >
              <option>请选择api接口</option>
              {apilist.map(item => <option key={item.api_authority_id} value={item.api_authority_id}>{item.api_authority_text}</option>)}
            </select></div>
            <div><button onClick={() => submit("five")} className={styles.que}>确定</button><button onClick={() => reset("five")} className={styles.rest}>重置</button></div>
          </li>
          <li>
            <div><button>给身份设置视图权限</button></div>
            <div><select name="userid1" onChange={setval} >
              <option>请选择身份id</option>
              {identitylist.map(item => <option key={item.identity_id} value={item.identity_id}>{item.identity_text}</option>)}
            </select></div>
            <div><select name="viewid" onChange={setval} >
              <option value={viewid}>请选择视图权限id</option>
              {viewlist.map(item => <option key={item.view_authority_id} value={item.view_authority_id}>{item.view_authority_text}</option>)}
            </select></div>
            <div><button onClick={() => submit("six")} className={styles.que}>确定</button><button onClick={() => reset("six")} className={styles.rest}>重置</button></div>
          </li>
        </ul>
      </div>

    </div>
  );
}
export default Adduser
